<template>
  <div class="vipCarousel">
    <div class="title">
      <NuxtImg :src="assets.titleIcon" />
      <p>{{ lang.bonus_advance_title }}</p>
    </div>

    <Swiper
      :autoplay="false"
      :show-indicators="false"
      :show-arrows="false"
      aria-label="Gallery"
      ref="swiperRef"
    >
      <SwiperItem v-for="s in slides" :key="s.id">
        <div style="padding: 0 0.3rem">
          <div class="vipBox2">
            <div class="title">
              <p>{{ s.nextText }}</p>
              <span>{{ s.levelText }}</span>
            </div>
            <div class="el-progress-circle-box">
              <div class="el-progress-circle">
                <svg viewBox="0 0 100 100" class="">
                  <path
                    class="el-progress-circle__track"
                    d="
          M 50 50
          m 0 -45
          a 45 45 0 1 1 0 90
          a 45 45 0 1 1 0 -90
          "
                    stroke="var(--el-fill-color-light, #e5e9f2)"
                    stroke-linecap="round"
                    stroke-width="9.5"
                    fill="none"
                    :style="{
                      strokeDasharray: `${circle.circumference}px, ${circle.circumference}px`,
                      strokeDashoffset: '0px',
                    }"
                  ></path>
                  <path
                    class="el-progress-circle__path"
                    d="
          M 50 50
          m 0 -45
          a 45 45 0 1 1 0 90
          a 45 45 0 1 1 0 -90
          "
                    stroke="var(--theme-dec4)"
                    fill="none"
                    opacity="1"
                    stroke-linecap="round"
                    stroke-width="9.5"
                    :style="{
                      strokeDasharray: `${(
                        progressPerSlide(s) * circle.circumference
                      ).toFixed(3)}px, ${circle.circumference}px`,
                      strokeDashoffset: '0px',
                      transition:
                        'stroke-dasharray 0.6s, stroke 0.6s, opacity 0.6s',
                    }"
                  ></path>
                </svg>
              </div>
              <div class="el-progress--circle">
                <NuxtImg :src="s.centerIcon" />
              </div>
            </div>

            <div class="progressTxt">
              <p>
                {{ userStore.moneyUnit }} {{ s.displayCurrentAmount }} / &nbsp;
              </p>
              <span>
                {{ userStore.moneyUnit }} {{ s.displayTargetAmount }}</span
              >
            </div>
            <div class="progressTxtBottomTxt">{{ lang.plays_accumulated }}</div>

            <div class="vipInfo">
              <div class="vipInfoTxt">
                <p class="vipInfo_title">{{ lang.withdraw_limit_title }}</p>
                <div class="vipInfo_item">
                  <p>{{ lang.withdraw_fee }}</p>
                  <span>0%</span>
                </div>
                <div class="vipInfo_item">
                  <p>{{ lang.withdraw_daily_limit }}</p>
                  <span>50000</span>
                </div>
                <div class="vipInfo_item">
                  <p>{{ lang.withdraw_daily_times }}</p>
                  <span>10</span>
                </div>
              </div>
              <div class="vipInfo_bottomBox">
                <p class="vipInfo_bottom">{{ lang.level_bonus_formula }}</p>
              </div>
            </div>

            <div class="bottom">
              <div class="btn sl_box_shadow btnMask">
                <NuxtImg :src="assets.receiveIcon" alt="" />
                <p>
                  {{ lang.receive }} {{ userStore.moneyUnit }}
                  {{ s.receiveAmount }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </SwiperItem>
    </Swiper>

    <div class="toVip" v-click-move @click="toLevels">
      <p>{{ lang.check_bonus_page }}</p>
    </div>

    <!-- 翻页箭头 -->
    <div class="arrowLeft arrow" v-click-move @click="swiperRef.prev()">
      <NuxtImg :src="assets.arrowLeft" alt="Prev" />
    </div>
    <div class="arrowRight arrow" v-click-move @click="swiperRef.next()">
      <NuxtImg :src="assets.arrowRight" alt="Next" />
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/vip");
const userStore = useUserStore();
const swiperRef = ref<any>(null);

const assets = {
  titleIcon: "/images/activity/vip/vip_13.png",
  receiveIcon: "/images/activity/vip/BonusCabinet_9.png",
  vipSignIn0: "/images/user/vipSignIn_0.png",
  vipSignIn1: "/images/user/vipSignIn_1.png",
  vipSignIn2: "/images/user/vipSignIn_2.png",
  arrowLeft: "/images/layout/icon-jtLeft.png",
  arrowRight: "/images/layout/icon-jtRight.png",
};

interface SlideItem {
  id: number;
  nextText: string;
  levelText: string;
  centerIcon: string;
  targetAmount: string; // original display
  receiveAmount: string; // original display
  targetAmountNum: number; // mock numeric (unit)
  currentAmountNum: number; // mock numeric (unit)
  displayTargetAmount: string; // formatted display
  displayCurrentAmount: string; // formatted display
}

function makeLevel(base: string, num?: number): string {
  return num ? `${base} ${num}` : base;
}

const nf = new Intl.NumberFormat("pt-BR", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

function createSlide(
  partial: Omit<SlideItem, "displayTargetAmount" | "displayCurrentAmount">
): SlideItem {
  return {
    ...partial,
    displayTargetAmount: nf.format(partial.targetAmountNum),
    displayCurrentAmount: nf.format(partial.currentAmountNum),
  };
}

// mock slides with numeric amounts for progress linkage
const slides: SlideItem[] = [
  createSlide({
    id: 1,
    nextText: lang.next_label,
    levelText: makeLevel(lang.level_novice),
    centerIcon: assets.vipSignIn0,
    targetAmount: "10,00",
    receiveAmount: "0,25",
    targetAmountNum: 10,
    currentAmountNum: 2.5,
  }),
  createSlide({
    id: 2,
    nextText: "",
    levelText: makeLevel(lang.level_bronze, 1),
    centerIcon: assets.vipSignIn1,
    targetAmount: "100,00",
    receiveAmount: "1,00",
    targetAmountNum: 100,
    currentAmountNum: 23,
  }),
  createSlide({
    id: 3,
    nextText: "",
    levelText: makeLevel(lang.level_bronze, 2),
    centerIcon: assets.vipSignIn1,
    targetAmount: "500,00",
    receiveAmount: "3,00",
    targetAmountNum: 500,
    currentAmountNum: 120,
  }),
  createSlide({
    id: 4,
    nextText: "",
    levelText: makeLevel(lang.level_bronze, 3),
    centerIcon: assets.vipSignIn1,
    targetAmount: "1.500,00",
    receiveAmount: "5,00",
    targetAmountNum: 1500,
    currentAmountNum: 640,
  }),
  createSlide({
    id: 5,
    nextText: "",
    levelText: makeLevel(lang.level_bronze, 4),
    centerIcon: assets.vipSignIn1,
    targetAmount: "3.000,00",
    receiveAmount: "8,00",
    targetAmountNum: 3000,
    currentAmountNum: 850,
  }),
  createSlide({
    id: 6,
    nextText: "",
    levelText: makeLevel(lang.level_silver, 1),
    centerIcon: assets.vipSignIn2,
    targetAmount: "6.000,00",
    receiveAmount: "10,00",
    targetAmountNum: 6000,
    currentAmountNum: 1200,
  }),
  createSlide({
    id: 7,
    nextText: "",
    levelText: makeLevel(lang.level_silver, 2),
    centerIcon: assets.vipSignIn2,
    targetAmount: "10.000,00",
    receiveAmount: "12,00",
    targetAmountNum: 10000,
    currentAmountNum: 2200,
  }),
];

function toLevels() {
  navigateTo({ name: "activity-vip-levels" });
}

// SVG circle helpers
const circle = {
  radius: 45,
  circumference: 2 * Math.PI * 45,
};

function progressPerSlide(s: SlideItem): number {
  if (s.targetAmountNum <= 0) return 0;
  const p = s.currentAmountNum / s.targetAmountNum;
  return Math.max(0, Math.min(1, p));
}
</script>

<style scoped lang="scss">
.vipCarousel {
  width: 100%;
  padding: 0.35rem 0;
  background: var(--theme-color4);
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  margin-top: 0.24rem;
  /* 确保正确的层叠上下文 */
  z-index: 1;
}
.title {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0 0.3rem;
  img {
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.13rem;
    vertical-align: middle;
    transform: translateY(-0.04rem);
  }
  p {
    font-size: var(--font-title2);
    color: var(--theme-neutral1);
    font-weight: 700;
  }
}

.vipBox2 {
  width: 100%;
  background: var(--theme-color3);
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 0.35rem;
  box-sizing: border-box;
  color: var(--theme-neutral1);

  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    p {
      font-size: 0.36rem;
      font-weight: 700;
      height: 0.4rem;
    }
    span {
      font-weight: 700;
      font-size: 0.42rem;
    }
  }

  .el-progress--circle {
    width: 4.32rem;
    height: 4.32rem;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    img {
      width: 2rem;
    }
  }

  .progressTxt {
    display: flex;
    align-items: center;
    margin: 14px 0 2px;
    font-size: 0.38rem;
    p {
      color: var(--theme-dec4);
    }
  }
  .progressTxtBottomTxt {
    color: var(--theme-neutral1);
    font-size: 0.32rem;
    margin-top: 0.24rem;
    margin-bottom: 0.49rem;
  }

  .vipInfo {
    box-sizing: border-box;
    width: 100%;
    background-color: var(--theme-color4);
    border-radius: 0.2rem;
    column-gap: 0.35rem;
    color: var(--theme-neutral1);

    .vipInfoTxt {
      padding: 0.32rem 0.26rem 0;
      display: flex;
      flex-direction: column;
      gap: 0.37rem;

      .vipInfo_title {
        font-size: 0.38rem;
        text-align: center;
      }
      .vipInfo_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.34rem;
      }
    }

    .vipInfo_bottomBox {
      background-color: var(--theme-neutral3);
      border-radius: 0 0 0.3rem 0.3rem;
      height: 1.1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.35rem;

      .vipInfo_bottom {
        font-size: 0.34rem;
        text-align: center;
      }
    }
  }

  .bottom {
    margin-top: 0.4rem;
    width: 100%;
    opacity: 0.5;

    .btn {
      width: 100%;
      height: 1.2rem;
      background: linear-gradient(
        270deg,
        var(--theme-main-gradient2) 0%,
        var(--theme-main-gradient1) 100%
      );
      border-radius: 0.3rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.36rem;

      img {
        width: 0.5rem;
        vertical-align: middle;
        margin-right: 0.1rem;
        transform: translateY(-0.04rem);
      }
      p {
        color: var(--theme-neutral1);
        font-size: 0.37rem;
        font-weight: 700;
      }
    }
  }
}

.toVip {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--theme-neutral1);
  gap: 0.1rem;
}
/* 备用箭头样式 - 确保在iOS上正确显示 */
.arrow {
  position: absolute;
  top: 4.14rem;
  width: 0.6rem;
  height: 1.6rem;
  background: var(--theme-neutral3);
  border-radius: 0.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 增加z-index确保在最上层 */
  /* iOS Safari 特定修复 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* 确保在iOS上正确显示 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* 强制创建新的层叠上下文 */
  isolation: isolate;

  img {
    width: 0.37rem;
  }
}
.arrowLeft {
  left: 1rem;
  /* 确保左箭头在iOS上正确显示 */
  z-index: 10000;
}
.arrowRight {
  right: 1rem;
  /* 确保右箭头在iOS上正确显示 */
  z-index: 10000;
}
.el-progress-circle-box {
  width: 4.32rem;
  height: 4.32rem;
  position: relative;
}
.el-progress-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 3.4rem;
}
</style>
